<template>
    <section>
        <div class="page-card">
            <div class="card-header">
                <span class="header-title">基本信息</span>
                <a-button type="primary" @click="submitUserInfo">保存</a-button>
            </div>
            <div class="card-content">
                <a-row>
                    <a-col :span="7">
                        <div class="account">
                            <div class="account-img">
                                <a-upload name="file" list-type="picture-card" :headers="headers" class="avatar-uploader"
                                    :action="uploadImgUrl" :show-upload-list="false" @change="handleChange">
                                    <img v-if="(form.avatar || userInfo?.userItem?.avatar)" :src="formatShowImg" alt=""
                                        style="height: 102px; width: 102px; border-radius: 50%" />
                                    <div v-else>
                                        <div class="ant-upload-text">请上传头像</div>
                                    </div>
                                </a-upload>
                            </div>
                            <div class="account-info">
                                <div class="mb-16" @click="changeNickNameVisible = true">
                                    <span class="col-223354 fz-14">{{ userInfo?.userItem?.nickname }}</span>
                                    <svg-icon name="icon_edit" style="width: 16px;height: 16px;margin-left: 5px;"
                                        class="mr-24"></svg-icon>
                                </div>
                                <div class="fz-14 mb-16 col-8A93A7">ID: {{ userInfo?.userItem?.userId }}</div>
                                <div>
                                    <svg-icon v-if="userInfo?.userItem?.memberLevel > 0" name="icon_member"
                                        class="member-icon" @click="router.push('/memberBenefits')" />
                                    <svg-icon v-else name="icon_ordinary" class="member-icon"
                                        @click="router.push('/memberBenefits')" />
                                </div>

                                <!-- 已实名 -->
                                <div class="info-status audited" v-if="userInfo?.userItem?.idAuth">
                                    <check-circle-filled style="font-size: 12px;" />
                                    <span>已实名</span>
                                </div>
                                <!-- 未实名 -->
                                <div class="info-status no-audit" @click="nameAuthVisible = true"
                                    v-if="!userInfo?.userItem?.idAuth && (!userInfo?.userAuthApply || userInfo?.userAuthApply?.audit_status == 4)">
                                    <svg-icon name="icon_info"
                                        style="width:12px;height:12px;margin-right: 4px;color: #FF3D00;" />
                                    <span>未实名</span>
                                </div>
                                <!-- 实名认证中 -->
                                <div class="info-status auditing"
                                    v-if="!userInfo?.userItem?.idAuth && (userInfo?.userAuthApply?.audit_status && userInfo?.userAuthApply?.audit_status !== 4)">
                                    <svg-icon name="icon_info"
                                        style="width:12px;height:12px;margin-right: 4px;color: #FF3D00;" />
                                    <span>实名认证中</span>
                                </div>
                            </div>
                        </div>
                    </a-col>
                    <a-col :span="14">
                        <div class="user">
                            <a-form :label-col="{ span: 6 }" :wrapper-col="{ span: 18 }" :model="form">
                                <a-row :gutter="24">
                                    <a-col :span="12">
                                        <a-form-item name="realName" label="姓名"
                                            :rules="[{ required: true, message: '请填写姓名' }]">
                                            <a-input v-model:value="form.realName" allowClear autocomplete="off"
                                                placeholder="请填写姓名" :maxlength="10" />
                                        </a-form-item>
                                    </a-col>
                                    <a-col :span="12">
                                        <a-form-item name="profession" label="职业"
                                            :rules="[{ required: true, message: '请选择职业' }]">
                                            <a-select v-model:value="form.profession" placeholder="请选择职业">
                                                <a-select-option value="学生">学生</a-select-option>
                                                <a-select-option value="公司职员">公司职员</a-select-option>
                                                <a-select-option value="科研工作者">科研工作者</a-select-option>
                                                <a-select-option value="其他">其他</a-select-option>
                                            </a-select>
                                        </a-form-item>
                                    </a-col>
                                    <a-col :span="12">
                                        <a-form-item name="education" label="学历"
                                            :rules="[{ required: true, message: '请选择学历' }]">
                                            <a-select v-model:value="form.education" placeholder="请选择学历">
                                                <a-select-option value="博士">博士</a-select-option>
                                                <a-select-option value="硕士">硕士</a-select-option>
                                                <a-select-option value="本科">本科</a-select-option>
                                                <a-select-option value="专科">专科</a-select-option>
                                                <a-select-option value="其他">其他</a-select-option>
                                            </a-select>
                                        </a-form-item>
                                    </a-col>
                                    <a-col :span="12">
                                        <a-form-item name="industry" label="应用行业"
                                            :rules="[{ required: true, message: '请选择应用行业' }]">
                                            <a-select v-model:value="form.industry" placeholder="请选择应用行业">
                                                <a-select-option value="零售业">零售业</a-select-option>
                                                <a-select-option value="教育">教育</a-select-option>
                                                <a-select-option value="商业地产">商业地产</a-select-option>
                                                <a-select-option value="公共服务业">公共服务业</a-select-option>
                                                <a-select-option value="工业制造业">工业制造业</a-select-option>
                                                <a-select-option value="金融业">金融业</a-select-option>
                                                <a-select-option value="交通运输业">交通运输业</a-select-option>
                                                <a-select-option value="医药行业">医药行业</a-select-option>
                                                <a-select-option value="其他">其他</a-select-option>
                                            </a-select>
                                        </a-form-item>
                                    </a-col>
                                    <a-col :span="12">
                                        <a-form-item name="area" label="地区" :rules="[{ required: true, message: '请填写地区' }]">
                                            <a-cascader v-model:value="form.area" :options="areaList"
                                                :field-names="{ label: 'name', value: 'name' }" placeholder="请选择地区" />
                                        </a-form-item>
                                    </a-col>
                                </a-row>

                            </a-form>
                        </div>
                    </a-col>
                </a-row>
            </div>
        </div>

        <div class="page-card">
            <div class="card-header">
                <span class="header-title">安全设置</span>
                <a-button type="primary" @click="router.push('/messageSet')">通知设置</a-button>
            </div>
            <div class="card-content">
                <div class="safe-set-list">
                    <div class="safe-list-label">
                        <svg-icon name="icon-safe-account" style="width: 16px;height: 16px;margin-right: 8px;"></svg-icon>
                        账户密码
                    </div>
                    <div class="safe-list-con">***********</div>
                    <div class="safe-list-opt">
                        <span class="success-status mr-16">
                            <check-circle-filled />
                            <span class="fz-14" style="margin-left: 4px;">已设置</span>
                        </span>

                        <a-divider type="vertical" />
                        <a-button type="link" @click="openChangePwd">修改密码</a-button>
                    </div>
                </div>

                <div class="safe-set-list">
                    <div class="safe-list-label">
                        <svg-icon name="icon-safe-phone" style="width: 16px;height: 16px;margin-right: 8px;"></svg-icon>
                        手机号
                    </div>
                    <div class="safe-list-con">{{ userInfo?.userItem?.phone }}</div>
                    <div class="safe-list-opt">
                        <span class="success-status mr-16">
                            <check-circle-filled />
                            <span class="fz-14" style="margin-left: 4px;">已设置</span>
                        </span>

                        <a-divider type="vertical" />
                        <a-button type="link" @click="openChangeMobile">更换号码</a-button>
                    </div>
                </div>

                <div class="safe-set-list" id="wxAuth">
                    <div class="safe-list-label">
                        <svg-icon name="icon-safe-account" style="width: 16px;height: 16px;margin-right: 8px;"></svg-icon>
                        <div>
                            <div>微信绑定</div>
                            <div class="col-8A93A7 fz-12">首次关注公众号<span class="col-money">【GpuMall智算云】</span>，绑定微信后可获得<span
                                    class="col-money">5元</span>无门槛代金券</div>
                        </div>
                    </div>
                    <div class="safe-list-con">***********</div>
                    <div class="safe-list-opt">
                        <span class="success-status mr-16" v-if="userInfo?.userItem?.isBindWechat">
                            <check-circle-filled />
                            <span class="fz-14" style="margin-left: 4px;">已设置</span>
                        </span>

                        <span class="warning-status mr-16" v-else>
                            <info-circle-filled />
                            <span class="fz-14" style="margin-left: 4px;">未认证</span>
                        </span>

                        <a-divider type="vertical" />
                        <a-button type="link" @click="unBindWx" v-if="userInfo?.userItem?.isBindWechat">解除绑定</a-button>
                        <a-button type="link" @click="bindWxVisible = true" v-else>绑定</a-button>
                    </div>
                </div>

                <div class="safe-set-list" id="emailAuth">
                    <div class="safe-list-label">
                        <svg-icon name="icon-safe-email" style="width: 16px;height: 16px;margin-right: 8px;"></svg-icon>
                        邮箱绑定
                    </div>
                    <div class="safe-list-con">{{ userInfo?.userItem?.email }}</div>
                    <div class="safe-list-opt">
                        <span class="success-status mr-16" v-if="userInfo?.userItem?.email">
                            <check-circle-filled />
                            <span class="fz-14" style="margin-left: 4px;">已设置</span>
                        </span>

                        <span class="warning-status mr-16" v-else>
                            <info-circle-filled />
                            <span class="fz-14" style="margin-left: 4px;">未设置</span>
                        </span>
                        <a-divider type="vertical" />
                        <a-button type="link" v-if="userInfo?.userItem?.email"
                            @click="bindEmailVisible = true">更换邮箱</a-button>
                        <a-button type="link" v-else @click="bindEmailVisible = true">绑定邮箱</a-button>
                    </div>
                </div>

                <div class="safe-set-list" id="nameAuth">
                    <div class="safe-list-label">
                        <svg-icon name="icon-safe-card" style="width: 16px;height: 16px;margin-right: 8px;"></svg-icon>
                        实名认证
                    </div>
                    <div class="safe-list-con"></div>
                    <div class="safe-list-opt">
                        <span class="warning-status mr-16" v-if="userInfo?.userItem?.idAuth">
                            <check-circle-filled />
                            <span class="fz-14" style="margin-left: 4px;">已认证</span>
                        </span>

                        <span class="warning-status mr-16" v-else>
                            <info-circle-filled />
                            <span class="fz-14" style="margin-left: 4px;">未认证</span>
                        </span>
                        <a-divider type="vertical" />
                        <!-- 未认证 -->
                        <a-button type="link" @click="nameAuthVisible = true"
                            v-if="!userInfo?.userItem?.idAuth && (!userInfo?.userAuthApply || userInfo?.userAuthApply?.audit_status == 4)">立即认证</a-button>
                        <!-- 认证中 -->
                        <a-button type="link" disabled
                            v-if="!userInfo?.userItem?.idAuth && (userInfo?.userAuthApply?.audit_status && userInfo?.userAuthApply?.audit_status !== 4)">认证中</a-button>
                    </div>
                </div>
            </div>
        </div>

        <div class="page-card"  id="roleAuth">
            <div class="card-header">
                <span class="header-title">身份认证</span>
            </div>
            <div class="card-content">
                <div class="authentication-success"
                    v-if="userInfo?.userItem?.isStudent || userInfo?.userItem?.isEnterprise">
                    <div class="auth-status">
                        <img src="@/assets/img/console/auth-success.png" alt="">
                        <div v-if="userInfo?.userItem?.isStudent">学生已认证</div>
                        <div v-if="userInfo?.userItem?.isEnterprise">企业已认证</div>
                    </div>
                    <div class="auth-info">
                        <img v-if="userInfo?.userItem?.isStudent" :src="handleImg('console/enterprise-qrcode.jpg')" alt="">
                        <span v-if="userInfo?.userItem?.isStudent">
                            <div style="color: #07F;" @click="router.push('/memberBenefits')">查看学生会员权益</div>
                            <div>扫码加入专属学生群</div>
                            <div>超多代金券领取和知识共享</div>
                        </span>

                        <img v-if="userInfo?.userItem?.isEnterprise" :src="handleImg('console/enterprise-qrcode.jpg')"
                            alt="">
                        <span v-if="userInfo?.userItem?.isEnterprise">
                            <div>扫码加入专属企业群</div>
                            <div>超多代金券领取和技术支持</div>
                        </span>
                    </div>
                </div>

                <!-- 未认证 -->
                <div class="authentication-type" v-if="noAuditing()">
                    <div class="authentication-list">
                        <img src="@/assets/img/console/student_authentication.png" alt="">
                        <div class="fz-16 col-223354 mb-24">学生认证</div>
                        <div class="fz-14 col-8A93A7 mb-24">通过即为会员，得10元专属代金券，同享会员95折</div>
                        <a-button type="primary" @click="router.push('/studentAuthentication')">立即认证</a-button>
                    </div>

                    <div class="authentication-list">
                        <img src="@/assets/img/console/enterprise_authentication.png" alt="">
                        <div class="fz-16 col-223354 mb-24">企业认证</div>
                        <div class="fz-14 col-8A93A7 mb-24">通过后开启企业专属功能</div>
                        <a-button type="primary" @click="router.push('/enterpriseauthentication')">立即认证</a-button>
                    </div>
                </div>

                <!-- 认证中 -->
                <div class="authentication-success" v-if="Auditing()">
                    <div class="auth-status">
                        <img src="@/assets/img/console/auth-success.png" alt="">
                        <div>认证中</div>
                    </div>
                </div>
            </div>
        </div>

        <div class="page-card" v-if="userInfo?.userItem?.isEnterprise">
            <div class="card-header">
                <span class="header-title">OpenAPI密钥</span>
                <a-button type="primary" class="opt" @click="openApiVisible = true"
                    v-if="openApiList.length < 3">添加</a-button>
            </div>
            <div class="card-content">
                <a-table :dataSource="openApiList" :pagination="false">
                    <a-table-column key="name" title="名称" data-index="name" />
                    <a-table-column key="createdAt" title="创建时间" data-index="createdAt" />
                    <a-table-column key="action" title="操作">
                        <template #default="{ record }">
                            <a-popconfirm title="确定要删除OpenAPI密钥?" @confirm="delOpenApi(record.id)">
                                <a-button type="link" style="padding-left:0;">删除</a-button>
                            </a-popconfirm>
                        </template>
                    </a-table-column>
                </a-table>
            </div>
        </div>

        <div class="page-card">
            <div class="card-header">
                <span class="header-title">SSH密钥管理</span>
                <a-button type="primary" class="opt" @click="addSSHVisible = true" v-if="SSHList.length < 3">添加</a-button>
            </div>
            <div class="card-content">
                <div class="no-data" v-if="!SSHList.length">
                    <div class="mr-24"><img src="@/assets/img/console/no-ssh.png" alt=""></div>
                    <div>
                        <div class="fz-14 col-8A93A7 mb-16">暂未设置SSH公钥</div>
                        <a-button type="primary" @click="addSSHVisible = true">添加</a-button>
                    </div>
                </div>

                <div class="SSH-list" v-else>
                    <a-table :dataSource="SSHList" :pagination="false">
                        <a-table-column key="name" title="备注名" data-index="name" />
                        <a-table-column key="pubKey" title="SSH公钥" data-index="pubKey" ellipsis="true" />
                        <a-table-column key="action" title="操作">
                            <template #default="{ record }">
                                <a-popconfirm title="确定要删除SSH公钥?" ok-text="Yes" cancel-text="No"
                                    @confirm="delSSH(record.id)">
                                    <a-button type="link" style="padding-left:0;">删除</a-button>
                                </a-popconfirm>
                            </template>
                        </a-table-column>
                    </a-table>
                </div>
            </div>
        </div>

        <div class="page-card">
            <div class="card-header">
                <span class="header-title">邀客有礼</span>
            </div>
            <div class="card-content">
                <a-form layout="inline">
                    <a-form-item label="我的邀请链接" style="min-width: 500px;">
                        <a-input disabled v-model:value="invitationLink" />
                    </a-form-item>

                    <a-button type="primary" @click="onCopy()">复制专属链接</a-button>
                    <span class="fz-14 col-8A93A7 ml-24" style="line-height: 2;">已邀请{{ userInfo?.inviteCount || 0 }}人</span>
                </a-form>
            </div>
        </div>

        <div class="page-card">
            <div class="card-header">
                <span class="header-title">关闭账号</span>
            </div>
            <div class="card-content">
                <exclamation-circle-filled style="color: #F1330D;margin-right: 4px;" />
                <span class="fz-14 col-8A93A7">注销成功后您在此账号下的用户数据将被永久清除，所有权益都将关闭。</span>
                <a-button type="text" danger @click="logOff()">注销此账号</a-button>
            </div>
        </div>

        <!-- 修改昵称 -->
        <ChangeNickName v-model="changeNickNameVisible" v-if="changeNickNameVisible" />

        <!-- 修改密码 -->
        <ChangePassword v-model="changePwdVisible" v-if="changePwdVisible" />

        <!-- 更换手机号 -->
        <ChangeMobile v-model="changeMobileVisible" v-if="changeMobileVisible" />

        <!-- 绑定微信 -->
        <BindWx v-model="bindWxVisible" v-if="bindWxVisible" />

        <!-- 添加ssh -->
        <AddSSH v-model="addSSHVisible" v-if="addSSHVisible" @refreshList="getSSHList" />

        <!-- 绑定邮箱 -->
        <BindEmail v-model="bindEmailVisible" v-if="bindEmailVisible" />

        <!-- 实名认证 -->
        <NameAuth v-model="nameAuthVisible" v-if="nameAuthVisible" />

        <!-- 添加openApi -->
        <OpenApi v-model="openApiVisible" v-if="openApiVisible" @refreshList="getOpenApiList" />

        <!-- 注销账号 -->
        <LogOff v-model="logOffVisible" v-if="logOffVisible" />
    </section>
</template>

<script setup name="Account">
import { reactive, ref, computed, onMounted } from 'vue'
import {
    CheckCircleFilled,
    InfoCircleFilled,
    ExclamationCircleFilled
} from '@ant-design/icons-vue';
import ChangePassword from './components/changePassword.vue'
import ChangeMobile from './components/changeMobile.vue'
import BindWx from './components/bindWx.vue'
import AddSSH from './components/addSSH.vue'
import BindEmail from './components/bindEmail.vue'
import ChangeNickName from './components/ChangeNickName.vue'
import NameAuth from './components/NameAuthAudit.vue'
import OpenApi from './components/OpenApi.vue'
import LogOff from './components/LogOff.vue'
import { useRouter, useRoute } from 'vue-router'
import { deleteSSH, getSSHListApi, updateUserInfo, unbindQrcode, delTokenApi, getTokenListApi } from 'api/modules/api.account'
import { XsyMessage } from '@/libs/util.toast'
import { areaList } from '@/assets/js/area.js'
import { uploadImgUrl } from '@/api/server.js'
import { storeToRefs } from 'pinia'
import dbUtils from "libs/util.strotage";
import clipboard3 from "vue-clipboard3";
import userInfoStore from '@/stores/userInfo.js'

const router = useRouter()
const route = useRoute()
const form = ref({})

// 获取个人信息
const useUserInfoStore = userInfoStore()
const { userInfo } = storeToRefs(useUserInfoStore);

form.value = userInfo.value.userProfile || {}
form.value.area = [userInfo?.value?.userProfile?.province, userInfo?.value?.userProfile?.city] || []

// 保存用户信息
const submitUserInfo = () => {
    const params = {
        ...form.value,
        province: form.value.area[0],
        city: form.value.area[1]
    }
    updateUserInfo(params).then(res => {
        if (res.code == 0) {
            XsyMessage.success('更新成功')
            userInfoStore().getUserInfo().then(() => { })
        }
    })
}

// 用户头像
const headers = {
    'gm-session-id': dbUtils.get('token')
}

const handleChange = ({
    file,
    fileList,
}) => {
    if (file.status === 'error') {
        ZyNotification.error(file.response.message || '上传失败')
    }
    if (file.status === 'done') {
        form.value.avatar = file.response.data.url || ''
    }
};

// 展示头像
const formatShowImg = computed(() => {
    return form.value.avatar || userInfo?.value?.userItem?.avatar
})

// 只取省市去掉区域
const handleTree = (areaTree) => {
    areaTree.forEach(item => {
        if (item.level == 1) {
            delete item.children
        } else {
            handleTree(item.children)
        }
    })
}

handleTree(areaList)

// 修改密码
const changePwdVisible = ref(false)
const openChangePwd = () => {
    changePwdVisible.value = true
}

// 修改手机号
const changeMobileVisible = ref(false)
const openChangeMobile = () => {
    changeMobileVisible.value = true
}

// 绑定微信
const bindWxVisible = ref(false)

// 解绑微信
const unBindWx = () => {
    unbindQrcode().then(res => {
        if (res.code == 0) {
            XsyMessage.success('解绑成功')
            userInfoStore().getUserInfo().then(() => { })
        }
    })
}

// SSH
const addSSHVisible = ref(false)
const SSHList = ref([])
const getSSHList = () => {
    getSSHListApi().then(res => {
        if (res.code == 0) {
            SSHList.value = res.data.list || []
        }
    })
}

getSSHList()

const delSSH = (id) => {
    deleteSSH({ id }).then(res => {
        if (res.code == 0) {
            XsyMessage.success('删除成功')
            getSSHList()
        }
    })
}

// 实名认证 
const nameAuthVisible = ref(false)

// 邮箱绑定
const bindEmailVisible = ref(false)

// 修改昵称
const changeNickNameVisible = ref(false)

// 判断是否是审核中
const Auditing = () => {
    let show = false
    if ((!userInfo?.value?.userItem?.isStudent && !userInfo?.value?.userItem?.isEnterprise) && (userInfo?.value?.enterpriseApply?.audit_status == 1 || userInfo?.value?.studentApply?.audit_status == 1)) {
        show = true
    }
    return show
}

// 判断未认证
const noAuditing = () => {
    let show = false
    // 学生和企业都未认证，并且认证驳回
    if (!userInfo?.value?.userItem?.isStudent && !userInfo?.value?.userItem?.isEnterprise) {
        if ((!userInfo?.value?.enterpriseApply && !userInfo?.value?.studentApply) || userInfo?.value?.enterpriseApply?.audit_status == '4' || userInfo?.value?.studentApply?.audit_status == '4') {
            show = true
        }
    }
    return show
}

// 邀客有利
const invitationLink = ref('')
const str = `user=${encodeURIComponent("好友")}&invitedUserId=${userInfo?.value?.userItem?.userId}&source=invited`
invitationLink.value = window.location.origin + '/login?' + str

// 复制功能
const { toClipboard } = clipboard3();
const onCopy = async () => {
    try {
        await toClipboard(invitationLink.value);
        XsyMessage.success('复制成功')
    } catch (e) {
        console.error(e);
    }
}

// openApi 
const openApiVisible = ref(false)
const openApiList = ref([])
const getOpenApiList = () => {
    getTokenListApi().then(res => {
        openApiList.value = res.data.list || []
    })
}

getOpenApiList()

const delOpenApi = (id) => {
    delTokenApi({ id }).then(res => {
        if (res.code == 0) {
            XsyMessage.success('删除成功')
            getOpenApiList()
        }
    })
}

// 注销
const logOffVisible = ref(false)
const logOff = () => {
    logOffVisible.value = true
}


onMounted(() => {//在onMounted钩子中判断是不是从底部导航跳转过来的
    if (route.query && route.query.key) {//底部导航跳转过来的则定位到响应位置
        document.querySelector('#' + `${route.query.key}`).scrollIntoView();
    }
})

</script>

<style scoped lang="less">
.page-card {
    padding: 24px;
    background: #ffffff;
    box-shadow: 0px 4px 4px 0px #E7EDF8;
    margin-bottom: 24px;

    .card-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 24px;

        .header-title {
            color: #223354;
            font-family: PingFang SC;
            font-size: 16px;
            font-style: normal;
            font-weight: 600;
            line-height: normal;
        }
    }

    .card-content {
        .account {
            display: flex;
            align-items: center;

            .account-img {
                width: 96px;
                height: 96px;
                margin-right: 24px;

                img {
                    display: block;
                    width: 100%;
                    height: 100%;
                    border-radius: 50%;
                }
            }

            .info-status {
                display: inline-block;
                border-radius: 4px;
                font-size: 12px;
                padding: 0 8px;
                height: 22px;
                line-height: 22px;
            }

            .audited {
                border: 1px solid rgba(83, 196, 27, 0.30);
                background: #F1FAED;
                color: #53C41B;
            }

            .no-audit {
                border: 1px solid #DEE2E8;
                background: #F6F8FA;
                color: #223354;
            }

            .auditing {
                border: 1px solid rgba(255, 61, 0, 0.18);
                background: rgba(255, 61, 0, 0.06);
                color: #FF3D00;
            }

            .account-info {
                .member-icon {
                    width: 70px;
                    height: 20px;
                    margin-bottom: 16px;
                    cursor: pointer;
                }
            }
        }
    }

    // 安全设置
    .safe-set-list {
        border-radius: 4px;
        background: #F2F8FF;
        padding: 20px 48px 20px 24px;
        display: flex;
        align-items: center;
        margin-bottom: 20px;
        justify-content: space-between;

        .safe-list-label {
            display: flex;
            align-items: center;
            color: #223354;
            font-size: 14px;
            flex: 1;
        }

        .safe-list-con {
            flex: 1;
            color: #8A93A7;
        }

        .safe-list-opt {
            min-width: 180px;
        }

        .success-status {
            color: #53C41B;
        }

        .warning-status {
            color: #FF3D00;
        }
    }


    // 身份认证
    .authentication-success {
        display: flex;
        justify-content: center;

        .auth-status {
            margin-right: 64px;

            img {
                width: 115px;
                height: 115px;
                display: block;
                margin-bottom: 8px;
            }

            div {
                color: #223354;
                font-family: PingFang SC;
                font-size: 16px;
                font-style: normal;
                font-weight: 600;
                line-height: normal;
                text-align: center;
            }
        }

        .auth-info {
            img {
                width: 108px;
                height: 106px;
                display: block;
                margin-bottom: 16px;
            }

            div {
                margin-bottom: 8px;
                color: #8A93A7;
                font-family: PingFang SC;
                font-size: 14px;
                font-style: normal;
                font-weight: 400;
                line-height: normal;
            }
        }
    }

    .authentication-type {
        display: flex;

        .authentication-list {
            flex: 1;

            img {
                display: block;
                width: 113px;
                height: 113px;
                text-align: center;
                margin: 0 auto 16px;
            }

            &>div {
                text-align: center;
            }

            button {
                display: block;
                margin: 0 auto;
            }
        }
    }

    // ssh密钥管理
    .no-data {
        display: flex;
        align-items: center;
        justify-content: center;
    }

}
</style>

<style>
.page-card .ant-upload-select-picture-card {
    border: none;
}
</style>
